<style>
    h3 {
        margin-bottom: -5px;
    }

    .table-show{
        padding-top: 30px;
    }
</style>
<script type="text/javascript" src="<?=$this->baseUrl()?>/js/jquery.cookie.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        acceptData('table');
        deliverData('table');
    });

    function acceptData(href){
        $.post(href, {statusId : 3}, function(data){
            document.getElementById('accepted').innerHTML = data;
            $("a#link").click(function(){
                $.cookie('prevpage', 'accepted');
            });
            $('#accepted a.nav').click(function(event){
                event.preventDefault();
                var href = $(this).attr('href');
                acceptData(href);
            });
            $('#accepted select.nav').removeAttr('onchange');
            $('#accepted select.nav').change(function(){
                var href = '<?=$this->baseUrl()?>/transaction/table/page/' + $(this).val();
                acceptData(href);
            });
        });
    }

    function deliverData(href){
        $.post(href, {statusId : 4}, function(data){
            document.getElementById('delivered').innerHTML = data;
            $("a#link").click(function(){
                $.cookie('prevpage', 'accepted');
            });
            $('#delivered a.nav').click(function(event){
                event.preventDefault();
                var href = $(this).attr('href');
                deliverData(href);
            });
            $('#delivered select.nav').removeAttr('onchange');
            $('#delivered select.nav').change(function(){
                var href = '<?=$this->baseUrl()?>/transaction/table/page/' + $(this).val();
                deliverData(href);
            });
        });
    }

    function cancel(transactionId,code,statusId){
        var answer = prompt("Masukkan alasan Anda","");
        if(answer!=null){
            if(answer.length==0){
                alert('Mohon masukkan alasan Anda');
                return;
            }

            document.frmCancel.transactionId.value = transactionId;
            document.frmCancel.transactionCode.value = code;
            document.frmCancel.statusId.value = statusId;
            document.frmCancel.reason.value = answer;
            document.frmCancel.submit();
        }
    }
</script>
<div id="view-content">
    <div class="table-show">
    <h3>Transaksi yang belum dikirim</h3>
    <div id="accepted">
        <!-- Table content is loaded using JQuery ajax -->
        <div style ="padding:10px;">Loading...</div>
    </div>
    </div>
    <div class="table-show">
    <h3>Transaksi yang sedang dikirim</h3>
    <div id="delivered">
        <!-- Table content is loaded using JQuery ajax -->
        <div style ="padding:10px;">Loading...</div>
    </div>
    </div>
    <div id="hiddenform" style="display:none;">
        <form name="frmCancel" method="POST">
            <?php echo $this->formHidden("transactionId","0"); ?>
            <?php echo $this->formHidden("transactionCode",""); ?>
            <?php echo $this->formHidden("statusId","0"); ?>
            <?php echo $this->formHidden("cancel","Batalkan"); ?>
            <?php echo $this->formHidden("reason",""); ?>
        </form>
    </div>
</div>